<template>
  <el-dialog

    :visible.sync="dialogVisible"
    v-bind="options.props"
    v-on="options.events"
  >
    <div class="radio">
      <el-radio-group v-model="tabPosition" size="mini">
        <el-radio-button label="1">流转信息</el-radio-button>
        <el-radio-button label="2">流程跟踪</el-radio-button>
      </el-radio-group>
    </div>
    <div style="margin-top: 10px">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div style="padding: 10px">
      <el-button type="primary" @click="onConfirm">确认</el-button>
    </div>
<!--    <div style="height: 500px;overflow-y: scroll" v-loading="loading">
      <el-button type="primary">确认</el-button>
    </div>-->
  </el-dialog>
</template>

<script>



export default {
  components: {},
  mixins: [],
  watch: {
    tabPosition: {
      handler(newValue) {
        switch (newValue) {
          case '1':
            this.options.props.title = '流转信息'
            break;
          case '2':
            this.options.props.title = '流程跟踪'
            break;
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      loading: true,
      process: "",
      tabPosition: "1",
      dialogVisible: true,
      options: {
        props: {
          width: '70%',
          title: "流转信息"
        },
        events: {}
      },
      form: {name:'', region:''}
    }
  },
  methods: {
    setAttrs(options) {
      let {row} = options;
      this.getDetail(row)
      this.options = {...options}
    },
    getDetail({taskId, processInsId}) {
      //this.dialogVisible = false;
      // this.loading = true;
      // this.getTaskDetail(taskId, processInsId,false)
      //   .then(result => {
      //     console.log(result,1)
      //   }).catch(() => {
      //     this.$message.error('请求失败')
      //   this.dialogVisible = false;
      // }).finally(() => this.loading = false)
    },
    async onConfirm() {
      await this.options.events.confirm && typeof this.options.events.confirm === 'function' && this.options.events.confirm(this.form)
      this.dialogVisible = false
    }
  }
}
</script>
<style scoped>
/*::v-deep {
  .el-dialog__body {
    padding: 0 20px 30px;
  }

  .el-container {
    min-height: 500px;
  }

  .djs-container {
    min-height: 500px !important;

    svg {
      min-height: 400px;
    }

  }

}

.radio {
  margin-bottom: 20px;
}*/
</style>
